const n = `<!--
 * @Author: Quarter
 * @Date: 2024-07-18 16:01:08
 * @LastEditors: Quarter
 * @LastEditTime: 2024-09-04 19:45:53
 * @FilePath: /simple-ui/packages/documents/src/views/desktop/loading/default-loading.vue
 * @Description: 默认示例组件
-->
<template>
  <s-form label-width="8em" colon="：">
    <s-form-item label="动画类型">
      <s-radio-group v-model="options.theme" :options="themeList"></s-radio-group>
    </s-form-item>
    <s-form-item label="动画变体">
      <s-radio-group v-model="options.variant" :options="variantList"></s-radio-group>
    </s-form-item>
    <s-form-item label=" 是否显示">
      <s-switch v-model="options.loading"></s-switch>
    </s-form-item>
    <s-form-item label="显示区域">
      <s-flex
        class="loading-container"
        justify-content="center"
        align-items="center"
        :style="{
          width: '50vw',
          height: '50vh',
          backgroundColor: 'aliceblue',
          position: 'relative',
        }"
      >
        <span>加载动画显示区域</span>
        <s-loading
          :theme="options.theme"
          :variant="options.variant"
          :loading="options.loading"
        ></s-loading>
      </s-flex>
    </s-form-item>
  </s-form>
</template>

<script lang="ts">
import {
  LOADING_THEME_DEFAULT,
  LOADING_THEME_LABEL,
  LOADING_THEME_OPTIONS,
  LOADING_VARIANT_DEFAULT,
  LOADING_VARIANT_LABEL,
  LOADING_VARIANT_OPTIONS,
} from "@smartcity/simple-ui";
import { Component, Vue } from "vue-property-decorator";

@Component
export default class DefaultLoading extends Vue {
  /**
   * @description: 主题可选项列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly themeList = LOADING_THEME_OPTIONS.map((theme) => ({
    value: theme,
    label: LOADING_THEME_LABEL.get(theme),
  }));

  /**
   * @description: 变体可选项列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly variantList = LOADING_VARIANT_OPTIONS.map((variant) => ({
    value: variant,
    label: LOADING_VARIANT_LABEL.get(variant),
  }));

  /**
   * @description: 组件配置项
   * @private
   * @type {Object}
   */
  options = {
    theme: LOADING_THEME_DEFAULT, // 主题
    variant: LOADING_VARIANT_DEFAULT, // 变体
    loading: true, // 是否显示加载动画
  };
}
<\/script>
`; export { n as default };
